@charset "utf-8";

@function px($px){
    @return (px/2);
}
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}

.web{
    width:100%;
    height: 100%;
    position: relative;
    header{
        width: 100%;
        height: r(90);
        position: absolute;
        top: 0;
        background: #F7F7F7;
        border-bottom: 1px solid #c1c1c1;
        i{
            font-size: r(45);
            line-height: r(95);
            margin-left: r(20);
            color: #a6a8aa;
            float: left;
        }
        span{
            font-weight: 600;
            font-size: r(35);
            margin-left: r(250);
            line-height: r(90);
            color: #333333;
        }
        p{
            float: right;
            font-size: r(35);
            line-height: r(90);
            margin-right: r(20);
            color: #666666;
        }
    }//header
    section{
        width: 100%;
        position: absolute;
        top: r(90);
        bottom: r(100);
        overflow: scroll;
        background: #FFFFFF;
        -webkit-overflow-scrolling: touch;
        .color{
            width:100%;
            height: r(20);
            background: #f3f4f6;
        }
        .secBox1{
            width: 100%;
            height: r(80);
            
            border-bottom: 1px solid #dedede;
            h3{
                font-size: r(30);
                line-height: r(85);
                margin-left: r(20);
                float: left;
            }
            p{
                width: r(135);
                height: r(50);
                border: 1px solid #e1e1e1;
                border-radius: 3px;
                margin-top: r(12.5);
                float: right;
                margin-right: r(20);
                font-size: r(30);
                text-align: center;
                line-height: r(50);
                color: #666666;
            }
            span{
                float: right;
                font-size: r(30);
                margin-right: r(20);
                line-height: r(85);
                color: #666666;
            }
        }//secBox1
        .secBox2{
            width: 100%;
            height: r(65);
            margin-top: r(20);
            p{
                height: r(40);
                width: r(80);
                background: #d62d31;
                font-size: r(24);
                text-align: center;
                line-height: r(40);
                margin-left: r(100);
                margin-right: r(25);
                display: inline-block;
                color: #FFFFFF;
            }
            span{

                font-size: r(24);
                line-height: r(55);
                display: inline-block;
                color: #666666;
            }
            i{
                font-size: r(40);
                line-height: r(55);
                margin-right: r(20);
                color: #a6a8aa;
                position: absolute;
                top: r(130);
                right: r(0);
            }
        }//secBox2
        .secBox3{
            width: 100%;
            height: r(270);
            margin-top: r(20);
            .secBox3-1{
                height: 100%;
                width: 13%;
                position: relative;
                a{
                    .icon-dui{
                    width: r(35);
                    height: r(35);
                    margin: 0 auto;
                    border: 1px solid #e0e0e1;
                    border-radius: 50%;
                    position: absolute;
                    top: r(50);
                    left: r(20);
                    }
                }
                a .icon-dui:hover{
                   background:url(../../img/market/sytlw.png)round;
                }
            }
            .secBox3-2{
                height: 100%;
                width: 87%;
                border-bottom: 1px solid #dedede;
                .secBox3-2_1{
                    width: r(180);
                    height: r(180);
                    border:1px solid #e6e6e6;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .secBox3-2_2{
                    width: r(440);
                    height: r(180);
                    margin-left: r(20);
                    h3{
                        font-size: r(28);
                    }
                    p{
                        font-size: r(24);
                        color: #cccccc;
                        margin-top: r(5);
                        margin-bottom: r(5);
                    }
                    span{
                        font-size: r(32);
                        color: #dc595b;
                    }
                }
                .secBox3-2_3{
                    width: 100%;
                    height: r(85);
                    background: #FFFFFF;
                    float: left;
                    .secBoxgong{
                        width: 100%;
                        height: r(10);
                    }
                    
                }
            }
        }//secBox3
        .secBox4{
            width: 100%;
            height: r(180);
            background: #f3f4f6;
            .secBox4-1{
                width: r(250);
                height: r(100);
                background: yellow;
                margin: 0 auto;
                margin-top: r(40);
                background: #f3f4f6;
                img{
                    width: r(80);
                    height: r(75);
                    float: left;
                    margin-top: r(30);
                }
                p{
                    font-size: r(26);
                    float: left;
                    color: #cacacb;
                    margin-top: r(-10);
                    margin-left: r(10);
                    margin-top: r(30);
                }
                span{
                    font-size: r(18);
                    float: left;
                    color: #cacacb;
                    margin-left: r(10);
                }
            }
            .secBox4-2{
                width:100%;
                margin-top: r(20);
                background: #f3f4f6;
                p{
                    font-size: r(25);
                    text-align: center;
                    color: #cacacb;
                }
            }
        }
    }//section
    footer{
        width: 100%;
        height: r(100);
        position: absolute;
        bottom: 0;
        .foot1{
            width: r(110);
            height: 100%;
            
            i{
                font-size: r(50);
                text-align: center;
                margin-left: r(20);
                color: #d62d31;
                line-height: r(100);
            }
        }
        .foot2{
           
            p{
                font-size: r(24);
                line-height: r(100);
            }
        }
        .foot3{
            width: r(310);
            height: 100%;
            margin-left: r(25);
            .sp1{
                font-size: r(28);
                color: #666666;
            }
            .sp2{
                font-size: r(35);
            }
            p{
                font-size: r(20);
                color: #6a6868;
                .sp3{
                    color: #333333;
                }
            }
        }
        .foot4{
            width: r(240);
            height: 100%;
            background: #D62D31;
            p{
                color: #fff;
                font-size: r(35);
                line-height: r(100);
                text-align: center;
            }
        }
    }
    .maodian{
        width: r(85);
        height: r(85);
        background:rgba(0,0,0,.7);
        position: fixed;
        top: r(900);
        right: r(50);
        border-radius: 50%;
        i{
            color: #FFFFFF;
            font-size: r(60);
            line-height: r(85);
            margin-left: r(12);
        }
    }//maodian
    .secBox5{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        position: absolute;
        top: 0;
        display: none;
        .secBox6{
            width: 100%;
            height: r(635);
            background: #FFFFFF;
            position: absolute;
            bottom: 0;
            .secBox6-1{
                width: 100%;
                height: r(130);
                border-bottom: 1px solid #c1c3c3;
                h3{
                    font-size: r(30);
                    text-align: center;
                    padding-top: r(20);
                }
                p{
                    font-size: r(28);
                    color: #797979;
                    text-align: center;
                    margin-top: r(10);
                }
            }
            .secBox6-2{
                width: 90%;
                height: r(140);
                margin: 0 auto;
                border-bottom: 1px solid #c1c3c3;
                h3{
                    width: 70%;
                    float: left;
                    font-size: r(28);
                    color: #D62D31;
                    margin-top: r(10);
                }
                p{
                    width: 70%;
                    float: left;
                    font-size: r(24);
                    margin-top: r(5);
                }
                span{
                    width: 70%;
                    float: left;
                    font-size: r(18);
                    margin-bottom: r(10);
                }
                input{
                    width: r(95);
                    height: r(50);
                    border: 1px solid #d62d31;
                    border-radius: 3px;
                    float: right;
                    margin-top: r(-50);
                    font-size: r(20);
                    line-height: r(50);
                    background: #FFFFFF;
                }
            }
        }
        .secBox7{
            width: 100%;
            height: r(70);
            a{
                color: #000000;
                p{
                    font-size: r(30);
                    font-weight: 600;
                    line-height: r(70);
                    text-align: center;
                }
            }
        }
        
    }
    .sBox5{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.7);
            position: absolute;
            top: 0;
            display: none;
            .sBox6{
                width: 100%;
                height: r(680);
                background: #FFFFFF;
                position: absolute;
                bottom: 0;
                .sBox6-1{
                    width: 94%;
                    height: r(190);
                    margin: 0 auto;
                    
                    .sBox6-1_1{
                        width: 33.3%;
                        height: r(190);
                        float: left;
                        .sBox6img{
                            width: r(105);
                            height: r(105);
                            margin: 0 auto;
                            margin-top: r(20);
                            a img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        p{
                            text-align: center;
                            font-size: r(24);
                            color: #d3d3d3;
                            margin-top: r(20);
                        }
                    }
                }
                .secBox7{
            width: 100%;
            height: r(70);
            border-top:1px solid #e0e0e0 ;
            a{
                color: #000000;
                p{
                    font-size: r(30);
                    font-weight: 600;
                    line-height: r(100);
                    text-align: center;
                    
                }
            }
        }
            }
        }
        
        .shanchu{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.7);
            position: absolute;
            top: 0;
            display: none;
            .shanchu1{
                width: 80%;
                height: r(300);
                margin: 0 auto;
                background: #FFFFFF;
                border-radius: 5px;
                margin-top:r(600) ;
                p{
                    font-size: r(30);
                    text-align: center;
                    padding-top: r(60);
                    color: #666666;
                }
                input{
                    width: r(235);
                    height: r(80);
                    font-size: r(30);
                    border-radius:5px ;
                    margin-top: r(80);
                }
                .bu1{
                    border: 1px solid #b7b7b7;
                    color: #666666;
                    margin-left:r(35);
                }
                .bu2{
                    background: #d62d31;
                    color: #FFFFFF;
                    margin-left:r(35);
                    margin-right:r(35);
                }
            }
        }
}//web
